<template>
  <div class="container">
    <TitleBox></TitleBox>  
    <div class="mine-yu-e">
      <div class="yu-e-main flex-box">
        <p><span><svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-wenzheng-woyaoduihuanx"></use>
          </svg></span><i>我的余额</i></p>
        <h3>50.00元</h3>
        <button>提现</button>
        <p>满1元可进行提现，系统会自动扣除10%手续费</p>
      </div>
      <div class="yu-e-list">
        <ul>
          <li>
            <div class="lists-main flex-box"><p>总收入：</p><p>288.00元</p></div>
          </li>
          <li>
            <div class="lists-main flex-box"><p>总支出：</p><p>8.00元</p></div></li>
          <li class="active">
            <div class="lists-main flex-box"><p>已提现：<span class="list-show">?</span></p><p>815.00元</p></div>
            <div class="lists-more flex-box">
              <p>请到微信钱包查看具体收益记录</p>
              <span class="list-close">✕</span>
            </div>
          </li>
          <li class="active">
            <div class="lists-main flex-box"><p>我的积分：<span class="list-show">?</span></p><p>888分</p></div>
            <div class="lists-more flex-box">
              <p>请到微信钱包查看具体收益记录</p>
              <span class="list-close">✕</span>
            </div>
          </li>
        </ul>
      </div>
      <div class="mine-yu-e-bottom">
        <button class="detail">账户明细</button>
      </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import TitleBox from '../components/TitleBox.vue'
export default {
  name: 'home',
  data() {
    return {
      lists: ''
    }
  },
  components: {
    TitleBox
  },
  computed: {},
  methods: {},
  mounted() {}
}
</script>
<style lang="scss" scoped>
.mine-yu-e {
  max-width: 750px;
  margin: 0 auto;
  padding-left: r(15);
  padding-right: r(15);
  box-sizing: border-box;
  padding-bottom: 20px;
  .yu-e-main {
    width: 100%;
    color: #ffffff;
    height: r(160);
    background: #6dbbfe;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    border-radius: r(12);
    margin-top: r(12);
    padding-top: r(6);
    box-sizing: border-box;
    p {
      font-size: r(12);
      line-height: r(24);
      width: 100%;
      text-align: center;
      span {
        font-size: r(16);
        margin-right: r(4);
        position: relative;
        top: r(2);
      }
      i {
        line-height: r(16);
        display: inline-block;
      }
    }
    h3 {
      font-size: r(30);
      color: #ffffff;
      line-height: r(36);
      width: 100%;
      text-align: center;
    }
    button {
      width: r(128);
      height: r(30);
      font-size: r(14);
      color: #6dbbfe;
      border: none;
      border-radius: 50px;
      background: #fff;
    }
  }
  .yu-e-list {
    width: 100%;
    ul {
      display: inline-block;
      li {
        float: left;
        width: 100%;
        border-bottom: 1px solid #dedede;
        padding-top: r(8);
        box-sizing: border-box;
        p {
          font-size: r(16);
          color: #333333;
          span {
            width: r(16);
            height: r(16);
            border-radius: 16px;
            background: #ccc;
            color: #fff;
            display: block;
            text-align: center;
            font-size: r(12);
            position: relative;
            float: right;
            line-height: r(16);
          }
        }
        .lists-main {
          width: 100%;
          height: r(60);
          justify-content: space-between;
          -webkit-justify-content: space-between;
        }
        .lists-more {
          width: 100%;
          height: r(46);
          background: #6dbbfe;
          border-radius: r(8);
          justify-content: space-between;
          -webkit-justify-content: space-between;
          color: #ffffff;
          padding-left: r(15);
          padding-right: r(5);
          box-sizing: border-box;
          box-shadow: 0 8px 24px rgba($color: #000000, $alpha: 0.1);
          transition: 0.25s ease;
          -webkit-transition: 0.25s ease;
          p {
            font-size: r(11);
            color: #ffffff;
          }
          span {
            padding: r(10);
          }
        }
        &.active {
          border-bottom: none;
        }
      }
    }
  }
  .mine-yu-e-bottom {
    width: 100%;
    height: r(60);
    margin-top: 32px;
    text-align: center;
    button {
      display: inline-block;
      width: r(180);
      height: r(40);
      border-radius: 100px;
      border: 1px solid #6dbbfe;
      background: #fff;
      font-size: r(14);
      color: #6dbbfe;
    }
  }
}
</style>
